<template>
    <div id="wrapper">

        <div class="search">
            <a-input-search default-value="三体"  size="large" placeholder="input search text" enter-button @search="onQuery"/>

        </div>

        <div class="result">

            <a-table :columns="columns" :data-source="searchList">
                <div slot="id" slot-scope="id" @click="onDetail(id)">
<!--                    <a-tag color="#2db7f5" @click="$router.push('/Detail')">-->
                    <a-tag color="#2db7f5" >
                        {{id}}
                    </a-tag>
                </div>
                <img slot="cover" slot-scope="cover" :src="cover">


                <span slot="action" slot-scope="text, record">
      <a>Invite 一 {{ record.name }}</a>
      <a-divider type="vertical"/>
      <a>Delete</a>
      <a-divider type="vertical"/>
      <a class="ant-dropdown-link"> More actions <a-icon type="down"/> </a>
    </span>
            </a-table>


        </div>

    </div>
</template>

<script>

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            slots: {title: 'id'},
            scopedSlots: {customRender: 'id'}

        },
        {
            title: '封面',
            dataIndex: 'cover',
            key: 'cover',
            slots: {title: 'cover'},
            scopedSlots: {customRender: 'cover'}
        },

        {
            title: '书名',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '简述',
            dataIndex: 'description',
            key: 'description',
        },

    ];


    import SystemInformation from './LandingPage/SystemInformation'

    export default {
        name: 'landing-page',
        components: {SystemInformation},
        data: function () {
            return {
                searchList: [],

                columns,
                bookId: ''
            }
        },
        methods: {
            open(link) {
                this.$electron.shell.openExternal(link)
            },

            onSearch: async function (value) {
                let result = this.$http.get('https://www.tuishujun.com/v1/books?page=1&q=' + value)
                    .then(response => {
                            this.searchList = response.data.docs
                            console.log(this.searchList)
                        }
                    )

            },

            onQuery: async function (value) {
                let result = this.$http.get('https://search.qingting.fm/v3/search?categoryid=0&page=1&pagesize=15&include=all&k=' + value)
                    .then(response => {
                            console.log(response.data.data)
                            this.searchList = response.data.data.data.docs
                            console.log(this.searchList)
                        }
                    )
            },
            onDetail(id) {
                console.log("id:" + id)


                var t="{\n" +
                    "                    channelPage(cid:"+id+",page:1,order:\"asc\",qtId:\"null\")\n" +
                    "                    {\n" +
                    "                    album\n" +
                    "                    seo\n" +
                    "                    plist\n" +
                    "                    reclist\n" +
                    "                    categoryId\n" +
                    "                    categoryName\n" +
                    "                    collectionKeywords\n" +
                    "                }\n" +
                    "                }"
                var jsons= {
                    query: t
                }


//在需要的事件中直接使用
                this.$http({
                    url:'https://webbff.qingting.fm/www',
                    method:'post',
                    data:jsons,
                    header:{
                        'Content-Type':'application/json'  //如果写成contentType会报错
                    }
                })
                    .then(res=>{
                        let bookInfo=res.data.data.channelPage.album
                        console.log("bookInfo",bookInfo)
                        this.$router.push({
                            name:'Detail',
                            params:bookInfo
                        })

                        this.$notification.open({

                            message:"(´▽`ʃ♡ƪ): ",
                            description:`书籍ID为 ${id}被你选中了！`,
                            onClick:()=>{
                                const hide = this.$message.loading('找到书籍幸福吧？', 0);
                                setTimeout(hide, 2500);
                            }
                        })


                    })
                    .catch(Error=>{
                        console.log(Error)
                    })
            }

        }
    }
</script>

<style>
    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: 'Source Sans Pro', sans-serif;
    }

    #wrapper {
        background: radial-gradient(
                ellipse at top left,
                rgba(255, 255, 255, 1) 40%,
                rgba(229, 229, 229, .9) 100%
        );
        height: 100vh;
        padding: 60px 80px;
        width: 100vw;
    }

    #logo {
        height: auto;
        margin-bottom: 20px;
        width: 420px;
    }

    main {
        display: flex;
        justify-content: space-between;
    }

    main > div {
        flex-basis: 50%;
    }

    .left-side {
        display: flex;
        flex-direction: column;
    }

    .welcome {
        color: #555;
        font-size: 23px;
        margin-bottom: 10px;
    }

    .title {
        color: #2c3e50;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 6px;
    }

    .title.alt {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .doc p {
        color: black;
        margin-bottom: 10px;
    }

    .doc button {
        font-size: .8em;
        cursor: pointer;
        outline: none;
        padding: 0.75em 2em;
        border-radius: 2em;
        display: inline-block;
        color: #fff;
        background-color: #4fc08d;
        transition: all 0.15s ease;
        box-sizing: border-box;
        border: 1px solid #4fc08d;
    }

    .doc button.alt {
        color: #42b983;
        background-color: transparent;
    }

    .result {
        margin-top: 30px;
    }

    .result img {
        width: 150px;
        height: 150px;
    }

    .result td:last-child {
        width: 500px;
    }
</style>
